<!DOCTYPE html>

<head>
    <meta name='viewport' content='width=device-width, initial-scale=1' charset="utf-8"/>
    <title>yobot登录</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.0/index.js"></script>
    <script src="{{ url_for('yobot_static', filename='password.js') }}"></script>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.0/theme-chalk/index.css">
    <style>
        #app {
            margin: auto;
        }

        .container {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-flow: column;
            max-width: 400px;
        }

        .comment {
            color: #aaa;
            line-height: 20px;
            font-size: 0.8em;
            margin: 20px 0;
        }
    </style>
</head>

<body>
<div id="app" class="container">
    <div class="container">
        <h1>登录</h1>

        {% if reason -%}
        <el-alert
                title="{{ reason }}"
                type="error">
        </el-alert>
        {% endif -%}
        {% if advice -%}
        <el-alert
                title="{{ advice }}"
                type="info">
        </el-alert>
        {% endif -%}

        <div style="margin: 20px;"></div>

        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
            <el-form-item label="QQ号" prop="qq">
                <el-input v-model="form.qq" name="user" placeholder="请输入登录QQ号"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="pwd">
                <el-input v-model="form.pwd" name="password" placeholder="这个密码不是QQ密码" type="password"></el-input>
                <p class="comment">* 如果不知道密码，您可以私聊机器人“{{ prefix }}登录”或“{{ prefix }}重置密码”</p>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">登录</el-button>
            </el-form-item>
        </el-form>
    </div>
    <footer style="text-align: center">
        powered by <a href="https://github.com/yuudi/yobot">yobot</a>
    </footer>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            form: {
                qq: "",
                pwd: ""
            },
            rules: {
                qq: [
                    {required: true, message: '必须输入您的QQ号', trigger: 'blur'}
                ],
                pwd: [
                    {required: true, message: '必须输入您的密码', trigger: 'blur'},
                ],
            }
        },
        methods() {
            if (localStorage.login_qqid) {
                this.form.qq = String(localStorage.login_qqid);
            }
        },
        methods: {
            post: function (url, params) {
                //创建form表单
                const temp_form = document.createElement("form");
                temp_form.action = url;
                //如需打开新窗口，form的target属性要设置为'_blank'
                // temp_form.target = "_blank";
                temp_form.method = "post";
                temp_form.style.display = "none";
                //添加参数
                for (const key in params) {
                    const opt = document.createElement("textarea");
                    opt.name = key;
                    opt.value = params[key];
                    temp_form.appendChild(opt);
                }
                document.body.appendChild(temp_form);
                //提交数据
                temp_form.submit();
            },
            onSubmit: function () {
                localStorage.login_qqid = this.form.qq;
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        const url = "{{ url_for('yobot_login') }}";
                        this.post(url, {
                            qqid: this.form.qq,
                            pwd: getHashWithSalt(this.form.pwd + this.form.qq)
                        });
                    } else {
                        console.log('请检查输入！');
                        return false;
                    }
                });
            }
        }
    })
</script>
</body>
</html>